<template>
  <div class="module-box">
    <div class="title">
      <div class="lb1"></div>
      <div class="tb1"></div>
      <div class="l-content">
        <div class="line"></div>
        <div class="left">
          <img src="@/assets/image/l-plg.png" />
        </div>
      </div>
      <div
        class="title-text"
        :style="
          title.length > 6 ? 'font-size: 0.14rem;' : 'font-size: 0.18rem;'
        "
      >
        {{ title }}
      </div>
      <div class="r-content">
        <div class="line"></div>
        <div class="right">
          <img src="@/assets/image/r-plg.png" />
        </div>
      </div>
    </div>
    <div :class="clipsmall ? 'm-content m-content0 lbox' : 'm-content m-content1 lbox'">
      <div class="lb"></div>
      <div class="rb"></div>
      <div class="bb1"></div>
      <div class="bb2"></div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "moduleBox",
  props: {
    title: {
      type: String,
      default: "",
    },
    clipsmall: {
      type: Boolean,
      default: true,
    },
  },
};
</script>
<style scoped lang="scss">
.module-box {
  width: 100%;
  height: 100%;
  .title {
    border: 2.5px solid rgba(39, 69, 107, 1);
    width: 62%;
    max-width: 15vw;
    height: 3.2vh;
    background: linear-gradient(
      90deg,
      #3662a4 10.36%,
      #203860 58.63%,
      #3662a4 100%
    );
    clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 100;
    position: relative;
    left: 0;

    .title-text {
      height: 40px;
      color: #0ff;
      font-family: "YouSheBiaoTiHei";
      font-size: 0.18rem;
      font-style: normal;
      font-weight: 400;
      z-index: 10;
      text-align: center;
      line-height: 3.2vh;
      // padding: 0 .15vw;
    }
    .l-content,
    .r-content {
      // background-color: salmon;
      height: 100%;
      display: flex;
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-sizing: border-box;
      .line {
        padding: 0 0.3vw;
        height: 2px;
        background: #1c3559;
        border-radius: 20px;
      }
    }
    .l-content {
      align-items: flex-start;
      .line {
        margin-left: 12%;
        margin-bottom: 5%;
      }
    }
    .r-content {
      margin-right: 8%;
      align-items: flex-end;
      .line {
        margin-right: 12%;
        margin-bottom: 5%;
      }
    }
    .left {
      padding-right: 0.5vw;
      height: 36%;
      // background-color: saddlebrown;
      background: linear-gradient(
        90deg,
        #182e4f 12.59%,
        rgba(24, 44, 78, 0) 100%
      );
      clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      > img {
        width: 70%;
        height: 36%;
      }
    }

    .right {
      padding-left: 0.5vw;
      height: 36%;
      background: linear-gradient(
        -90deg,
        #182e4f 12.59%,
        rgba(24, 44, 78, 0) 100%
      );
      clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      > img {
        width: 70%;
        height: 36%;
      }
    }
  }

  .m-content {
    width: 100%;
    height: calc(100% - 3.2vh);
    border: 2.5px solid rgba(39, 69, 107, 1);
    background: rgba(11, 33, 74, 0.6);
    position: relative;
    margin-top: -2px;
  }
  .m-content0 {
    clip-path: polygon(0% 0, 93% 0, 100% 20px, 100% 100%, 0% 100%, 0 50%);
    position: relative;
    margin-top: -2px;
  }
  .m-content1 {
    clip-path: polygon(0% 0, 97% 0, 100% 20px, 100% 100%, 0% 100%, 0 50%);
  }
}
</style>
